<template>
    <div class="home">
        <el-container class="conDiv">
            <el-header class="header">
                <h2 class="headname" @click="dev">检察院运维管理平台</h2>
                <i class="el-icon-switch-button" @click="resLogin"></i>
                <h4 class="headId">{{ title }}</h4>
                <img :src="this.$store.state.headurl" class="headImg" v-cloak>
                <el-badge :value="6" class="item">
                    <i class="el-icon-bell"></i>
                </el-badge>
            </el-header>
            <el-container class="conDiv2">
                <el-aside width="64px" class="nav">
                    <el-menu default-active="/home/index" class="el-menu-vertical-demo" background-color="#112432"
                        :router="true">
                        <el-menu-item-group>
                            <el-menu-item index="/home/index">
                                <i class="el-icon-house"></i>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="/home/repair">
                                <i class="el-icon-suitcase"></i>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="/home/knowledge/wuJiB/wuJi1/wuJi3">
                                <i class="el-icon-notebook-1"></i>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="/home/settion">
                                <i class="el-icon-setting"></i>
                            </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="/home/personal">
                                <i class="el-icon-s-custom"></i>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-menu>
                </el-aside>
                <el-main class="main" style="position: relative;overflow: hidden;">
                    <RouterView></RouterView>
                    <components :is="this.$store.state.notice"></components>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import NoticeRun from '../components/NoticeRun.vue'
import { openDB } from 'idb';
export default {
    components: {
        NoticeRun
    },
    data() {
        return {
            uploadedImage: '',
            a: '',
            title: '',
            select: '',
            img: []
        }
    },
    methods: {
        resLogin() {
            this.$router.push('/')
            sessionStorage.clear()
            location.reload()
        },
        dev() {
            this.$store.commit('changge')
        }
    },
    async mounted() {
        console.log(this.$route.params)
        this.title = JSON.parse(sessionStorage.getItem('登录信息')).username

        if (!this.db) {
            this.db = await openDB('my-database', 1, {
                upgrade(db) {
                    db.createObjectStore('images', { keyPath: "id", autoIncrement: true });
                }
            });
        }

        const store = this.db.transaction('images').objectStore('images');
        const images = await store.getAll();
        // console.log(images)
        // this.img = images

        images.forEach((v) => {
            if (v.headtel === JSON.parse(sessionStorage.getItem('登录信息')).username) {
                this.img.push(v)
            }
        })
        if (this.img.length > 0 && JSON.parse(sessionStorage.getItem('登录信息')).username == this.img[this.img.length - 1].headtel) {
            this.uploadedImage = this.img[this.img.length - 1].image;
            this.$store.commit('changehead', this.uploadedImage)
        }
    }
};
</script>

<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;

    .conDiv {
        width: 100%;
        height: 100%;

        .header {
            width: 100%;
            height: 64px;
            background: #0970b8;
            box-shadow: 0px 3px 6px 0px rgba(12, 77, 122, 0.46);

            .headname {
                width: 216px;
                height: 33px;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 33px;
                margin-top: 14px;
                float: left;
            }

            .item {
                float: right;
                margin-top: 18px;
                margin-right: 30px;

                .el-icon-bell {
                    float: right;
                    font-size: 26px;
                    color: white;
                    cursor: pointer;
                }
            }


            .headImg {
                float: right;
                width: 40px;
                height: 40px;
                background: #0970b8;
                box-shadow: 0px 3px 6px 0px rgba(12, 77, 122, 0.46);
                border-radius: 50%;
                margin-right: 30px;
                margin-top: 10px;
                cursor: pointer;
            }

            .headId {
                float: right;
                // width: 40px;
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 20px;
                margin-top: 20px;
                margin-right: 30px;
            }

            .el-icon-switch-button {
                float: right;
                font-size: 26px;
                margin-top: 18px;
                margin-right: 20px;
                color: red;
                cursor: pointer;
            }

            .icon {
                background: #112432;
            }
        }

        .conDiv2 {
            width: 100%;
            height: 100%;

            .nav {
                height: 100%;
                background: #112432;
            }

            .main {
                width: 100%;
                height: 100%;
                background: #F5F8FA;
            }
        }
    }

    .el-card__body,
    .el-main {
        padding: 0px;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
}

[v-cloak] {
    display: none;
}
</style>
